<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">

    <script th:src="@{js/jquery.min.js}"></script>
    <!--这里不用加/static,默认在里面找，加了反而报错-->
    <script th:src="@{js/bootstrap.min.js}"></script>
    <style>

        .for_no_change:hover{
            cursor: no-drop ;
        }
        .opacity{
            opacity: revert;
        }
        body{
            background-color: #555555;
            /*//background:url("../static/image/bg.jpg") fixed;*/
        }
        .title{
            font-size: 20px;
        }
        .header{
            /*position: relative;*/
            margin: 100px;

            color: white;
            text-align: center;
        }
        .thumbs_photo{
            height: 24px;
            width: 24px;
        }
        .context{
            text-align: right;
        }
        .message{
            background-color: rgb(250,250,250);
        }
        .messages{
            width: 800px;
        }
        .rank{
            position: absolute;
            margin-left: 50px;
            font-size: 20px;
        }
        .context{
            margin:0 200px;
            color: #e4b9b9;
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand nav-tabs" th:href="@{/hello}">主页</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <form class=" search_form navbar-form navbar-left color-input-field">
                <div class="form-group">
                    <input type="search" class="form-control search_passage" placeholder="搜索博客">
                </div>


                <button type="button" class="btn btn-default btn_search">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a th:href="@{/articleUp}"><span>文章发表</span></a></li>
                <li><a th:href="@{/self}"><span th:text="${session.user.getUserName()}"></span></a></li>
                <li class="admin_option" style="pointer-events:none;" ><a  th:href="@{/admin}">管理</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">账号管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a th:href="@{/changeBlog}">切换账号</a></li>
                        <li><a th:href="@{/selfInfo}">编辑资料</a></li>
                        <li><a data-toggle="modal" data-target="#logout_account">注销</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a th:href="@{/changeBlog}"><span  class="glyphicon glyphicon-off"> 退出</span></a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse-->
    </div><!-- /.container-fluid -->
</nav>
<nav class="container header">
    <table class="table table-hover" style="text-align: left">
        <thead>
        <tr>
            <th>用户号</th>
            <th>博客号</th>
            <th>用户名</th>
            <th>用户密码</th>
            <th>性别</th>
            <th>创建日期</th>
        </tr>
        </thead>
        <tbody>
        <tr class="data_info">
            <td>[[${session.user.userId}]]</td>
            <td>[[${session.user.userBlog}]]</td>
            <td class="3" variable="name">[[${session.user.userName}]]</td>
            <td class="4" variable="password">[[${session.user.userPassword}]]</td>
            <td class="5" variable="gender">[[${session.user.userGender}]]</td>
            <td>[[${createTime}]]</td>
        </tr>
        <tr>
            <td><button type="button" class="btn-primary for_no_change " disabled="disabled">修改</button></td>
            <td><button type="button" class="btn-primary for_no_change" disabled="disabled">修改</button></td>
            <td><button class="btn-primary btn_alter " index="3" data-toggle="modal" data-target="#myModal">修改</button></td>
            <td><button class="btn-primary btn_alter "index="4" data-toggle="modal" data-target="#myModal">修改</button></td>
            <td><button class="btn-primary btn_alter "index="5" data-toggle="modal" data-target="#myModal">修改</button></td>
            <td><button type="button" class="btn-primary for_no_change" disabled="disabled">修改</button></td>
        </tr>
        </tbody>
    </table>
</nav>
<!--修改信息模态框-->
<div class="modal fade" id="myModal" style="display: none" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="myModalLabel" style="color:
                     #31b0d5;text-align: center"></h2>
            </div>
            <form class="form-horizontal" style="text-align: center">
                <div class="first_input">请输入修改值:<input class="input_pass" type="text"></div>
                <br/>
                <div class="to_password" style="display: none;margin-top: 10px">请确认修改值:<input class="second_password" type="password"></div>
                <p class="error_format" style="display: none;margin-top: 10px;color: darkred">格式不正确</p>
                <p class="tip_error" style="display: none;margin-top: 10px;color: darkred">两次密码不匹配</p>
                <div class="row" id="choose_gender" style="display: none">
                        <input class="gender" type="radio" name="gender" id="inlineRadio1" value="男" checked="checked">男
                        <input class="gender" type="radio" name="gender" id="inlineRadio2" value="女">女
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary change_info">确认修改</button>
                <button type="button" class="btn btn-default btn_close" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<!--注销模态款-->
<div class="modal fade" id="logout_account" style="display: none" tabindex="-1" role="dialog" aria-labelledby="logout_account">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h2 class="modal-title" id="logout_header" style="color:
                     #31b0d5;text-align: center">尊敬的[[${session.user.userName}]]</h2>
            </div>
            <form class="form-horizontal" style="text-align: center">
                <div class="logout_password" style="margin-top: 10px">输入密码:<input class="logout_password_input" type="password"></div>
                <p class="tip_logout_error" style="display: none;margin-top: 10px;color: darkred">密码错误，注销失败</p>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn_logout">确认注销</button>
                <button type="button" class="btn btn-default btn_logout_close" data-dismiss="modal">取消</button>
            </div>

        </div>
    </div>
</div>

</body>
<script th:inline="javascript">
    var password = [[${session.user.userPassword}]];
    sessionStorage.setItem("password",password);
    var userId = [[${session.user.userId}]];
    sessionStorage.setItem("userId",userId);
</script>
<script>



    //注销账号
    $(".btn_logout").click(function () {
        var password = $(".logout_password_input").val();
        var real_password = sessionStorage.getItem("password");
        if(password !== real_password){
            $(".tip_logout_error").css("display","block");
        }else{
            $(".tip_logout_error").css("display","none");
            //删除
            logout_ajax();
        }
    })

    function logout_ajax(){
        $.ajax({
            url: "/logout",
            type: "POST",
            data:{userId:sessionStorage.getItem("userId")},
            dataType: "JSON",
            success: function (data) {
                alert("注销成功");
                window.location="/index";
            }
        })
    }

    //搜索功能
    $(".btn_search").click(function () {
        var search_blogId = $(".search_passage").val();
        $.ajax({
            url: "/search",
            type: "POST",
            data:{searchBlogId:search_blogId},
            datatype: "JSON",
            success: function (data) {
                if(data===-1){
                    alert("无该文章");
                    return false;
                }else{
                    window.location.href="/article?id="+ data;
                }
            }
        })
    })

    $(".header").on("click",".btn_alter",function () {
        var index = $(this).attr("index");
        var text = $(this).parent().parent().siblings(".data_info").children("."+index);
        var operation = text.attr("variable");
        $(".change_info").attr("operation",operation);
        $("#to_check_change").text(text.text());
        $("#myModalLabel").text(operation);
        if(operation==="password"){
            $(".error_format").css("display","none");
            $(".tip_error").css("display","none");
            $("#choose_gender").css("display","none");
            $(".first_input").css("display","block");
            $(".input_pass").prop("type","password");
            $(".to_password").css("display","block");
            $(".input_pass").val("");
            $(".second_password").val("");
        }else if(operation==="gender"){
            $(".error_format").css("display","none");
            $(".tip_error").css("display","none");
            $("#choose_gender").css("display","block");
            $(".input_pass").val("");
            $(".second_password").val("");
            //隐藏
            $(".first_input").css("display","none");
            $(".to_password").css("display","none");
        }else{
            $(".error_format").css("display","none");
            $(".tip_error").css("display","none");
            $("#choose_gender").css("display","none");
            //隐藏
            $(".first_input").css("display","block");
            $(".to_password").css("display","none");
            $(".input_pass").val("");
            $(".second_password").val("");
        }
        $("#myModal").show("slow");
        // operation_ajax(operation)
    })
    //提交修改请求
    $(".change_info").click(function () {
        var operation = $(this).attr("operation");

        if(operation==="password") {
            var first_password = $(".input_pass").val();
            console.log(first_password)
            var second_password = $(".second_password").val();
            //检验密码的正确性
            var regPassword = /^[a-zA-Z0-9]{6,12}$/;
            if(!regPassword.test(first_password)) {
                $(".error_format").css("display", "block");
                return false;
            }else{
                $(".error_format").css("display", "none");
            }
            //两次输入不匹配
            if (first_password !== second_password) {
                $(".tip_error").css("display", "block");
                return false;
            } else {
                $(".tip_error").css("display", "none");
                //通过函数发送ajax请求
                //TODO 验证信息的合格性
                //不能提交
                //密码为，6-12位的任意字母和数字的组合

            }
            operation_ajax(operation,first_password);
            // alert("修改成功")
            // $(".input_pass").val("");
            // $(".second_password").val("");
            // $(".btn_close").click();
            return true;
        }else if(operation === "name"){
            var info = $(".input_pass").val();
            console.log(info);
            //TODO 验证信息的合格性
            var regName = /^([a-zA-Z0-9_-]{4,16}|[\u4E00-\u9FA5]){1,10}$/;
            if(!regName.test(info)){
                $(".error_format").css("display", "block");
                return false;
            }else{
                $(".error_format").css("display", "none");
            }
            operation_ajax(operation,info);
        }else if(operation === "gender"){
            //添加两个复选框
            //根据名字获取标签
            var inputSelect = document.getElementsByTagName('input');
            var gender;
            for(var i = 0;i<inputSelect.length;i++){
                if (inputSelect[i].checked && inputSelect[i].type === 'radio'){
                    gender = inputSelect[i].value;
                }
            }
            operation_ajax(operation,gender);
        }

    })
    function operation_ajax(operation,info) {
        $.ajax({
            url:"/operation?option="+operation,
            type: "POST",
            dataType: "JSON",
            data:{info:info},
            success: function (data) {
                alert(data);
                $(".input_pass").val("");
                $(".second_password").val("");
                $(".btn_close").click();
                location.reload();
            },
            error: function (data) {
                alert("修改失败,清重试");
            }
        })
    }

</script>
</body>
</html>